<script setup lang="ts">
const musicStore = useMusicStore();

const localMusicList = computed(() => musicStore.localMusicList);

const selectFileVisible = ref(true);

const getAudioList = (files: AudiopalyRecord[]) => {
  files.forEach(file => {
    if(file.type === 'mp3' || file.type === 'flac'){
      addMusic(file)
    }
  })
  selectFileVisible.value = false
  uni.navigateBack();
}

function addMusic(item: AudiopalyRecord) {
  if (localMusicList.value.find(music => music.path === item.path)) {
    return;
  }
  let nameArr = item.name.split('-');

  if (nameArr.length === 2) {
    item.musicName = nameArr[0];
    item.author = nameArr[1].replace(/\.(mp3|flac)$/i, '').trim();
  } else if (nameArr.length === 1) {
    item.musicName = nameArr[0].replace(/\.(mp3|flac)$/i, '').trim();
    item.author = '未知';
  } else {
    item.musicName = item.name
    item.author = '未知';
  }
  musicStore.setLocalMusicList([...localMusicList.value, item]);
}

// 监听返回键
onBackPress(() => {
  return selectFileVisible.value
  // return false
})
</script>

<template>
  <view class="app-container">

    <bg-select-file v-model="selectFileVisible" @change="getAudioList" />
  </view>
</template>

<style scoped lang="scss">
.app-container {
  padding-top: 80rpx;
  background-color: #F8F8F8;
}
</style>
```

<script lang="ts">
export default {}
</script>